<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>冷库基础信息</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.warehouse-info-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.page-title {
			margin-bottom: 25px;
		}
		.page-title h2 {
			margin: 0 0 8px 0;
			color: #333;
			font-size: 24px;
		}
		.page-title p {
			margin: 0;
			color: #666;
			font-size: 14px;
		}
		
		/* 搜索筛选区 */
		.search-section {
			background: #fff;
			border-radius: 12px;
			padding: 25px;
			margin-bottom: 25px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.08);
		}
		.search-title {
			font-size: 16px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
		}
		.search-form {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 15px;
			align-items: end;
		}
		
		/* 冷库卡片 */
		.warehouse-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
			gap: 25px;
		}
		.warehouse-card {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.08);
			overflow: hidden;
			transition: transform 0.2s, box-shadow 0.2s;
		}
		.warehouse-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 30px rgba(0,0,0,0.15);
		}
		
		/* 卡片头部 */
		.card-header {
			position: relative;
			height: 200px;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.warehouse-name {
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 8px;
		}
		.warehouse-location {
			font-size: 14px;
			opacity: 0.9;
			display: flex;
			align-items: center;
			gap: 5px;
		}
		.warehouse-status {
			position: absolute;
			top: 15px;
			right: 15px;
			padding: 6px 12px;
			border-radius: 15px;
			font-size: 12px;
			font-weight: 500;
		}
		.status-available {
			background: rgba(82, 196, 26, 0.2);
			color: #52c41a;
			border: 1px solid rgba(82, 196, 26, 0.3);
		}
		.status-full {
			background: rgba(255, 77, 79, 0.2);
			color: #ff4d4f;
			border: 1px solid rgba(255, 77, 79, 0.3);
		}
		.status-limited {
			background: rgba(250, 140, 22, 0.2);
			color: #fa8c16;
			border: 1px solid rgba(250, 140, 22, 0.3);
		}
		.warehouse-stats {
			display: flex;
			gap: 20px;
		}
		.stat-item {
			text-align: center;
		}
		.stat-value {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 4px;
		}
		.stat-label {
			font-size: 12px;
			opacity: 0.8;
		}
		
		/* 卡片内容 */
		.card-content {
			padding: 20px;
		}
		.info-section {
			margin-bottom: 20px;
		}
		.section-title {
			font-size: 14px;
			font-weight: 600;
			color: #333;
			margin-bottom: 12px;
			display: flex;
			align-items: center;
			gap: 8px;
		}
		.info-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
		}
		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 13px;
			padding: 8px 0;
			border-bottom: 1px solid #f5f5f5;
		}
		.info-label {
			color: #666;
		}
		.info-value {
			color: #333;
			font-weight: 500;
		}
		
		/* 设施标签 */
		.facility-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
		}
		.facility-tag {
			padding: 4px 8px;
			background: #f0f9ff;
			color: #1890ff;
			border: 1px solid #b3d8ff;
			border-radius: 4px;
			font-size: 11px;
			font-weight: 500;
		}
		
		/* 温区展示 */
		.temp-zones {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
		}
		.temp-zone {
			padding: 6px 10px;
			border-radius: 6px;
			font-size: 12px;
			font-weight: 500;
			color: white;
		}
		.zone-frozen {
			background: #1890ff;
		}
		.zone-cold {
			background: #52c41a;
		}
		.zone-fresh {
			background: #fa8c16;
		}
		.zone-room {
			background: #722ed1;
		}
		
		/* 卡片底部 */
		.card-footer {
			padding: 15px 20px;
			border-top: 1px solid #f0f2f5;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.price-info {
			color: #333;
			font-weight: 500;
		}
		.price-value {
			color: #e74c3c;
			font-size: 16px;
			font-weight: bold;
		}
		
		/* 分页 */
		.pagination-section {
			margin-top: 30px;
			text-align: center;
		}
		
		/* 响应式设计 */
		@media (max-width: 768px) {
			.warehouse-grid {
				grid-template-columns: 1fr;
			}
			.search-form {
				grid-template-columns: 1fr;
			}
			.warehouse-stats {
				gap: 15px;
			}
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="warehouse-info-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>冷库基础信息</h2>
				<p>查看衡阳地区冷库位置、库区分布、配套设施等基础信息</p>
			</div>

			<!-- 搜索筛选 -->
			<div class="search-section">
				<div class="search-title">搜索筛选</div>
				<div class="search-form">
					<div>
						<el-input v-model="searchParams.keyword" placeholder="搜索冷库名称或地址" prefix-icon="el-icon-search"></el-input>
					</div>
					<div>
						<el-select v-model="searchParams.city" placeholder="选择城市" style="width: 100%;">
							<el-option v-for="city in cities" :key="city.value" :label="city.label" :value="city.value"></el-option>
						</el-select>
					</div>
					<div>
						<el-select v-model="searchParams.capacity" placeholder="库容量" style="width: 100%;">
							<el-option v-for="capacity in capacities" :key="capacity.value" :label="capacity.label" :value="capacity.value"></el-option>
						</el-select>
					</div>
					<div>
						<el-select v-model="searchParams.tempType" placeholder="温区类型" style="width: 100%;">
							<el-option v-for="type in tempTypes" :key="type.value" :label="type.label" :value="type.value"></el-option>
						</el-select>
					</div>
					<div>
						<el-button type="primary" icon="el-icon-search" @click="searchWarehouses">搜索</el-button>
					</div>
					<div>
						<el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
					</div>
				</div>
			</div>

			<!-- 冷库列表 -->
			<div v-if="loading" style="text-align: center; padding: 50px; color: #999;">
				<i class="el-icon-loading" style="font-size: 32px; margin-bottom: 10px;"></i>
				<p>正在加载冷库信息...</p>
			</div>

			<div v-else class="warehouse-grid">
				<div v-for="warehouse in filteredWarehouses" :key="warehouse.id" class="warehouse-card">
					<!-- 卡片头部 -->
					<div class="card-header">
						<div>
							<div class="warehouse-name">{{warehouse.name}}</div>
							<div class="warehouse-location">
								<i class="el-icon-location"></i>
								{{warehouse.address}}
							</div>
						</div>
						<div :class="['warehouse-status', 'status-' + warehouse.status]">
							{{warehouse.statusText}}
						</div>
						<div class="warehouse-stats">
							<div class="stat-item">
								<div class="stat-value">{{warehouse.totalCapacity}}</div>
								<div class="stat-label">总容量(m³)</div>
							</div>
							<div class="stat-item">
								<div class="stat-value">{{warehouse.availableCapacity}}</div>
								<div class="stat-label">可用容量(m³)</div>
							</div>
							<div class="stat-item">
								<div class="stat-value">{{warehouse.zones}}</div>
								<div class="stat-label">温区数量</div>
							</div>
						</div>
					</div>

					<!-- 卡片内容 -->
					<div class="card-content">
						<!-- 基础信息 -->
						<div class="info-section">
							<div class="section-title">
								<i class="el-icon-info"></i>
								基础信息
							</div>
							<div class="info-grid">
								<div class="info-item">
									<span class="info-label">建设年份</span>
									<span class="info-value">{{warehouse.buildYear}}</span>
								</div>
								<div class="info-item">
									<span class="info-label">运营状态</span>
									<span class="info-value">{{warehouse.operationStatus}}</span>
								</div>
								<div class="info-item">
									<span class="info-label">认证等级</span>
									<span class="info-value">{{warehouse.certification}}</span>
								</div>
								<div class="info-item">
									<span class="info-label">联系电话</span>
									<span class="info-value">{{warehouse.phone}}</span>
								</div>
							</div>
						</div>

						<!-- 温区分布 -->
						<div class="info-section">
							<div class="section-title">
								<i class="el-icon-thermometer"></i>
								温区分布
							</div>
							<div class="temp-zones">
								<div v-for="zone in warehouse.temperatureZones" :key="zone.type" 
									:class="['temp-zone', 'zone-' + zone.type]">
									{{zone.name}} ({{zone.range}})
								</div>
							</div>
						</div>

						<!-- 配套设施 -->
						<div class="info-section">
							<div class="section-title">
								<i class="el-icon-setting"></i>
								配套设施
							</div>
							<div class="facility-tags">
								<span v-for="facility in warehouse.facilities" :key="facility" class="facility-tag">
									{{facility}}
								</span>
							</div>
						</div>
					</div>

					<!-- 卡片底部 -->
					<div class="card-footer">
						<div class="price-info">
							租赁价格: <span class="price-value">¥{{warehouse.price}}/m³/月</span>
						</div>
						<div>
							<el-button size="small" @click="viewDetails(warehouse)">查看详情</el-button>
							<el-button size="small" type="primary" @click="contactWarehouse(warehouse)">联系咨询</el-button>
						</div>
					</div>
				</div>
			</div>

			<!-- 分页 -->
			<div class="pagination-section">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[12, 24, 48]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalWarehouses">
				</el-pagination>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					loading: false,
					currentPage: 1,
					pageSize: 12,
					totalWarehouses: 0,
					searchParams: {
						keyword: '',
						city: '',
						capacity: '',
						tempType: ''
					},
					cities: [
						{value: '', label: '全部地区'},
						{value: 'zhengxiang', label: '衡阳蒸湘区'},
						{value: 'zhuhui', label: '衡阳珠晖区'},
						{value: 'yanfeng', label: '衡阳雁峰区'},
						{value: 'shigu', label: '衡阳石鼓区'},
						{value: 'nanyue', label: '衡阳南岳区'},
						{value: 'qidong', label: '衡阳祁东县'}
					],
					capacities: [
						{value: '', label: '全部容量'},
						{value: 'small', label: '1000m³以下'},
						{value: 'medium', label: '1000-5000m³'},
						{value: 'large', label: '5000-10000m³'},
						{value: 'extra', label: '10000m³以上'}
					],
					tempTypes: [
						{value: '', label: '全部温区'},
						{value: 'frozen', label: '冷冻(-18°C以下)'},
						{value: 'cold', label: '冷藏(0-4°C)'},
						{value: 'fresh', label: '保鲜(4-10°C)'},
						{value: 'room', label: '常温(15-25°C)'}
					],
					warehouses: [
						{
							id: 1,
							name: '衡阳蒸湘冷链物流中心',
							address: '衡阳市蒸湘区红湘路工业园区',
							status: 'available',
							statusText: '有库位',
							totalCapacity: 5500,
							availableCapacity: 1800,
							zones: 4,
							buildYear: 2020,
							operationStatus: '正常运营',
							certification: 'HACCP认证',
							phone: '0734-8888888',
							price: 35,
							temperatureZones: [
								{type: 'frozen', name: '冷冻区', range: '-18°C~-25°C'},
								{type: 'cold', name: '冷藏区', range: '0°C~4°C'},
								{type: 'fresh', name: '保鲜区', range: '4°C~10°C'},
								{type: 'room', name: '常温区', range: '15°C~25°C'}
							],
							facilities: ['24小时监控', '自动分拣', '月台装卸', '包装服务', '信息系统', '消防设施']
						},
						{
							id: 2,
							name: '衡阳珠晖农产品冷库',
							address: '衡阳市珠晖区东阳渡农产品批发市场',
							status: 'limited',
							statusText: '库位紧张',
							totalCapacity: 3200,
							availableCapacity: 400,
							zones: 3,
							buildYear: 2019,
							operationStatus: '正常运营',
							certification: 'ISO9001认证',
							phone: '0734-6666666',
							price: 32,
							temperatureZones: [
								{type: 'frozen', name: '急冻区', range: '-25°C~-30°C'},
								{type: 'cold', name: '冷藏区', range: '0°C~4°C'},
								{type: 'fresh', name: '果蔬保鲜区', range: '4°C~8°C'}
							],
							facilities: ['智能温控', 'WMS系统', '恒温恒湿', '气调保鲜', '质检室', '快检设备']
						},
						{
							id: 3,
							name: '衡阳雁峰冷链园区',
							address: '衡阳市雁峰区白沙洲工业园',
							status: 'available',
							statusText: '有库位',
							totalCapacity: 4800,
							availableCapacity: 2100,
							zones: 4,
							buildYear: 2021,
							operationStatus: '正常运营',
							certification: 'GSP认证',
							phone: '0734-7777777',
							price: 30,
							temperatureZones: [
								{type: 'frozen', name: '冷冻区', range: '-18°C~-22°C'},
								{type: 'cold', name: '冷藏区', range: '2°C~6°C'},
								{type: 'fresh', name: '果蔬区', range: '8°C~12°C'},
								{type: 'room', name: '干货区', range: '15°C~20°C'}
							],
							facilities: ['智能调度', '温度监控', '湿度控制', '通风系统', '备用电源', '安防系统']
						},
						{
							id: 4,
							name: '衡阳石鼓综合冷库',
							address: '衡阳市石鼓区松木经济开发区',
							status: 'available',
							statusText: '有库位',
							totalCapacity: 3800,
							availableCapacity: 1500,
							zones: 3,
							buildYear: 2020,
							operationStatus: '正常运营',
							certification: 'HACCP认证',
							phone: '0734-5555555',
							price: 33,
							temperatureZones: [
								{type: 'frozen', name: '冷冻区', range: '-18°C~-25°C'},
								{type: 'cold', name: '冷藏区', range: '0°C~4°C'},
								{type: 'fresh', name: '保鲜区', range: '6°C~10°C'}
							],
							facilities: ['数字化管理', '远程监控', '自动报警', '节能环保', '快速进出', '专业团队']
						},
						{
							id: 5,
							name: '衡阳南岳特产冷库',
							address: '衡阳市南岳区南岳大道特产园区',
							status: 'limited',
							statusText: '库位紧张',
							totalCapacity: 2500,
							availableCapacity: 300,
							zones: 2,
							buildYear: 2018,
							operationStatus: '正常运营',
							certification: 'ISO22000认证',
							phone: '0734-4444444',
							price: 38,
							temperatureZones: [
								{type: 'cold', name: '冷藏区', range: '0°C~4°C'},
								{type: 'fresh', name: '特产保鲜区', range: '8°C~15°C'}
							],
							facilities: ['特产专储', '温控精准', '湿度调节', '包装加工', '品质检测', '溯源管理']
						},
						{
							id: 6,
							name: '衡阳祁东黄花菜专业冷库',
							address: '衡阳市祁东县黄花菜产业园',
							status: 'available',
							statusText: '有库位',
							totalCapacity: 2800,
							availableCapacity: 1200,
							zones: 3,
							buildYear: 2021,
							operationStatus: '正常运营',
							certification: 'GAP认证',
							phone: '0734-3333333',
							price: 28,
							temperatureZones: [
								{type: 'cold', name: '黄花菜冷藏区', range: '0°C~6°C'},
								{type: 'fresh', name: '保鲜预处理区', range: '8°C~15°C'},
								{type: 'room', name: '干制品存储区', range: '18°C~22°C'}
							],
							facilities: ['黄花菜专储', '分级包装', '质量检测', '防虫防潮', '专业烘干', '品牌包装']
						}
					]
				}
			},
			computed: {
				filteredWarehouses() {
					return this.warehouses.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
				}
			},
			methods: {
				searchWarehouses() {
					this.$message.success('搜索完成');
					// 这里可以添加实际的搜索逻辑
				},
				
				resetSearch() {
					this.searchParams = {
						keyword: '',
						city: '',
						capacity: '',
						tempType: ''
					};
					this.$message.info('搜索条件已重置');
				},
				
				viewDetails(warehouse) {
					this.$message.info(`查看 ${warehouse.name} 的详细信息`);
				},
				
				contactWarehouse(warehouse) {
					this.$message.info(`联系 ${warehouse.name}：${warehouse.phone}`);
				},
				
				handleSizeChange(val) {
					this.pageSize = val;
				},
				
				handleCurrentChange(val) {
					this.currentPage = val;
				}
			},
			
			mounted() {
				this.totalWarehouses = this.warehouses.length;
			}
		});
	</script>
</body>
</html>